<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="referrer" content="never">
	    <meta content="telephone=no" name="format-detection"/>
	    <meta name="x5-orientation" content="portrait">
	    <meta name="screen-orientation" content="portrait">
	    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	    <title>结算信息</title>
	    <link href="#" rel="shortcut icon">
	    <link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/images/boon/company/reset.css"/>
	    <link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/pages/platform/soulList/css/toast.css"/>
	    <link rel="stylesheet"  href="//cdn.jsdelivr.net/npm/vant@2.11/lib/index.css"/>
	    <script type="text/javascript">
			eval(function(p, a, c, k, e, r) {
				e = function(c) {
					return c.toString(a)
				};
				if(!''.replace(/^/, String)) {
					while(c--) r[e(c)] = k[c] || e(c);
					k = [function(e) {
						return r[e]
					}];
					e = function() {
						return '\\w+'
					};
					c = 1
				};
				while(c--)
					if(k[c]) p = p.replace(new RegExp('\\b' + e(c) + '\\b', 'g'), k[c]);
				return p
			}('(6(a,d){j b=a.i,e="3"f 5?"3":"9",c=6(){b.7.8=(2>b.4?b.4:2)/2*g+"h"};a.0&&(d.0(e,c,!1),a.0("k",c,!1))})(l,5);', 22, 22, 'addEventListener||750|orientationchange|clientWidth|window|function|style|fontSize|resize||||||in|64|px|documentElement|var|DOMContentLoaded|document'.split('|'), 0, {}))
		</script>
	    <style type="text/css">
			body {
				background: #F7F8FA;
				-webkit-text-size-adjust: 100% !important;
			}
			.lineTitle{
				width: 100%;
				height: 1.44rem;
				box-sizing: border-box;
				line-height: 1.44rem;
				font-size: 0.44rem;
				font-weight: 400;
				color: #666666;
				padding-left: 0.5rem;
			}
			.van-cell {
			    padding: 0.36rem 0.5rem;
			    color: #333333;
    			font-size: 0.44rem;
			}
			.van-field__control{
				color: #7E7E7E;
			}
			.main_item .van-field__label{
				width: 7em;
			}
			.van-radio__icon, .van-checkbox__icon {
			    width: 0.63rem;
			    height: 0.63rem;
			    display: flex;
			}
			.van-radio__icon img, .van-checkbox__icon img {
			    width: 0.63rem;
			    height: 0.63rem;
			}
			.imgInfo{
				width: 100%;
				height: 3.38rem;
				background: #FFFFFF;
				display: flex;
				align-items: center;
			}
			.imgInfo_title{
				width: 3.75rem;
				height: 100%;
				font-size: 0.44rem;
				font-weight: 400;
				color: #333333;
				line-height: 0.56rem;
				box-sizing: border-box;
				padding-left: 0.5rem;
				padding-top: 0.44rem;
			}
			.imgInfo_img{
				height: 100%;
				display: flex;
				align-items: center;
			}
			.imgInfo_img img{
				width: 2.63rem;
				height: 2.63rem;
				display: block;
				margin-right: 0.38rem;
				object-fit: cover;
			}
			.back{
				width: 10.72rem;
				height: 1.56rem;
				background: #FFFFFF;
				border-radius: 0.19rem;
				border: 0.03rem solid #E9E9E9;
				margin: 0 auto;
				font-size: 0.56rem;
				font-weight: 600;
				color: #666666;
				line-height:  1.56rem;
				text-align: center;
				margin-top: 0.63rem;
				margin-bottom: 0.63rem;
			}
	    </style>
	</head>
	<body>
		<div id="app">
			<div class="lineTitle">结算基本信息</div>
			<van-field readonly clickable v-model="json_list.accountName" label="油站对公账户名" class='main_item'></van-field>
			<van-field readonly clickable v-model="json_list.bankBranch" label="油站账户支行" class='main_item'></van-field>
			<van-field readonly clickable v-model="json_list.bankAccount" label="银行账户" class='main_item'></van-field>
			<van-field name="radio" label="账户类型">
				<template #input>
					<van-radio-group direction="horizontal">
						<van-radio name="1">企业户
							<template #icon="props">
								<img class="img-icon" :src="json_list.accountType==1 ? activeIcon : inactiveIcon" />
							</template>
						</van-radio>
						<van-radio name="0">个人户
							<template #icon="props">
								<img class="img-icon" :src="json_list.accountType==0 ? activeIcon : inactiveIcon" />
							</template>
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field readonly clickable v-model="json_list.bankName" label="银行名称" class='main_item'></van-field>
			<van-field readonly clickable v-model="json_list.provinceName" label="开户省份" class='main_item'></van-field>
			<van-field readonly clickable v-model="json_list.accountCityName" label="开户城市" class='main_item'></van-field>
			<div class="lineTitle">证件信息</div>
			<div class="imgInfo">
				<div class="imgInfo_title">营业执照</div>
				<div class="imgInfo_img">
					<img :src="json_list.businesslicensePic"/>
				</div>
			</div>
			<div class="imgInfo">
				<div class="imgInfo_title">开户许可证</div>
				<div class="imgInfo_img">
					<img :src="json_list.startbusinesslicensePic"/>
				</div>
			</div>
			<div class="imgInfo">
				<div class="imgInfo_title">法人身份证<br/>正反面</div>
				<div class="imgInfo_img">
					<img :src="json_list.legalFrontPic"/>
					<img :src="json_list.legalReversePic"/>
				</div>
			</div>
			<div class="imgInfo">
				<div class="imgInfo_title">油品经营危<br/>化证</div>
				<div class="imgInfo_img">
					<img :src="json_list.DangerousPic"/>
				</div>
			</div>
			<div class="lineTitle">合作信息</div>
			<div class="imgInfo">
				<div class="imgInfo_title">合同照片</div>
				<div class="imgInfo_img">
					<img :src="contractPicList.contractPic"/>
				</div>
			</div>
			<div class="back" @click="onBack">返回</div>
		</div>
	</body>
	<script type="text/javascript" src="//img.ejiayou.com/activity/pages/platform/soulList/js/jquery.js"></script>
	<script type="text/javascript" src="//img.ejiayou.com/activity/images/groupon/common.js?v=1"></script>
	<script type="text/javascript" src="//img.ejiayou.com/activity/pages/platform/soulList/js/vue.js"></script>
	<script src="//cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/vant@2.11/lib/vant.min.js"></script>
	<script src="//cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
	<script type="text/javascript">
		var vConsole = new VConsole(); 
	    var vm = new Vue({
	        el: '#app',
	        data: {
	        	json_list:{},
	        	activeIcon: 'https://img.ejiayou.com/activity/jiguang_upload/img/active_icon.png',
				inactiveIcon: 'https://img.ejiayou.com/activity/jiguang_upload/img/inactive_icon.png',
	            contractPicList:{}
	        },
	        created: function () {
	        	this.getFormData()
	        	this.getSignInfo()
	        },
	        mounted: function () {
	        	
	        },
	        methods: {
			    onBack:function() {
					history.back();
				},
				getFormData: function(fn) {
					var self = this
					$.ajax({
						url: '/eapi/v1/activity/work/info',
						data: {
							admin_id: getQueryVariable('admin_id'),
							work_order_id: getQueryVariable('work_order_id')
						},
						type: 'get',
						dataType: 'json',
						success: function(res) {
							console.log(res)
							if(res.status == 200) {
								var resData = res.data
								self.json_list = JSON.parse(resData.content)
								if(fn) {
									fn()
								}
							}
						}
					})
					
				},
				getSignInfo: function() {
					var self = this
					$.ajax({
						url: '/eapi/v1/activity/work/get_sign_station_info_by_id',
						data: {
							admin_id: getQueryVariable('admin_id'),
							work_order_id: getQueryVariable('work_order_id')
						},
						type: 'POST',
//						contentType: 'application/json',
						success: function(res) {
							console.log(res)
							if(res.status == 200) {
								var resData = res.data
								self.contractPicList = JSON.parse(resData.content)
							}
						}
					})
					
				},
	        }
	    });
	</script>
</html>